"use client";
import type {WaterfallItemProps} from "@/components/Waterfall";

import {useEffect, useState} from "react";
import Waterfall, {WaterfallItem} from "@/components/Waterfall";

import {demoDataSource} from "./unit";

const Page = function () {

    const [dataSource, setDataSource] = useState<WaterfallItemProps[]>([]);

    useEffect(() => {
        setDataSource(() => {
            return demoDataSource(30);
        })
    }, []);

    function handleOpenDetails(item: WaterfallItemProps) {
        console.log('item', item)
    }

    return (
        <section className={"w-full py-4 px-7"}>
            <div className={"flex items-center justify-between mb-4"}>
                <div className={"text-stone-400 py-1.5 px-2.5 border rounded-lg"}>
                    来源Segmented控制器
                </div>
                <div className={"flex gap-2.5 text-stone-400"}>
                    <div>筛选条件1</div>
                    <div>筛选条件2</div>
                    <div>筛选条件3</div>
                    <div>筛选条件x</div>
                </div>
            </div>
            <Waterfall dataSource={dataSource}
                       renderItem={(item: WaterfallItemProps, index: number) => {
                           return <WaterfallItem {...item} onClick={handleOpenDetails}/>
                       }}/>
        </section>
    )
}

export default Page;